'use client'

import React from 'react';
import { BaseEditorProps } from './types';

export default function VideoEditor({ properties, updateProperty, handleFileSelect }: BaseEditorProps) {
  return (
    <div className="space-y-4">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">视频URL</label>
        <input
          type="text"
          className="w-full p-2 border border-gray-300 rounded"
          value={properties.src || ""}
          onChange={(e) => updateProperty('src', e.target.value)}
          placeholder="https://example.com/video.mp4"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">上传视频</label>
        <input
          type="file"
          accept="video/*"
          onChange={(e) => handleFileSelect(e, { type: 'video' })}
          className="w-full text-sm file:mr-2 file:py-2 file:px-4 file:rounded file:border file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">样式类名</label>
        <input
          type="text"
          className="w-full p-2 border border-gray-300 rounded"
          value={properties.className}
          onChange={(e) => updateProperty('className', e.target.value)}
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">视频填充方式</label>
        <select
          className="w-full p-2 border border-gray-300 rounded"
          value={properties.objectFit || 'cover'}
          onChange={(e) => updateProperty('objectFit', e.target.value)}
        >
          <option value="cover">覆盖 (cover)</option>
          <option value="contain">包含 (contain)</option>
          <option value="fill">填满 (fill)</option>
        </select>
        <p className="text-xs text-gray-500 mt-1">
          覆盖：视频填满容器，可能被裁剪；包含：视频完整显示，可能有黑边；填满：视频拉伸填满容器
        </p>
      </div>

      <div className="flex items-center">
        <input
          type="checkbox"
          id="video-autoplay-checkbox"
          checked={properties.autoPlay !== false}
          onChange={(e) => updateProperty('autoPlay', e.target.checked)}
          className="mr-2 h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
        />
        <label htmlFor="video-autoplay-checkbox" className="text-sm font-medium text-gray-700">
          自动播放
        </label>
        <p className="text-xs text-gray-500 ml-2">
          (静音状态下自动播放)
        </p>
      </div>
    </div>
  );
}
